// 使用vue插件注册全局指令
import { useIntersectionObserver } from '@vueuse/core'
import Load from '@/assets/images/load.gif'
export default {
  install (app) {
    // 注册全局指令
    // vue2 语法：Vue.directive('指令名（不带v-）', {inserted(){}})
    // vue3 语法：app.directive('指令名（不带v-）', {mounted(){}})
    app.directive('test', {
      // 使用test指令的元素被挂载渲染后执行
      /**
       *
       * @param {*} dom 使用test指令的元素dom对象
       * @param {*} binding 获取指令绑定的值（binding.value）
       */
      mounted (dom, binding) {
        console.log(dom, binding.value)
        dom.style.background = 'red'
      }
    })
    app.directive('zzyy', {
      // imgDom绑定的dom元素
      mounted (imgDom, binding) {
        const { stop } = useIntersectionObserver(
          imgDom,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              imgDom.src = Load
              setTimeout(() => {
                imgDom.src = binding.value
              }, 300)
              // 图片加载失败，显示默认图片
              imgDom.onerror = () => {
                imgDom.src = Load
              }
              stop()
            }
          },
          {
            // 阈值：0-1 =》设置为0，加速接口请求
            threshold: 0
          }
        )
      }
    })
  }
}
